<template>
  <div class="jgldmk">
    <div class="blueTitleStyle">GIS局放</div>
    <div class="content mediumtablestyle">
      <!-- <div class="betweenbox caption">
        <div class="centerbox captionname">间隔单元</div>
        <div class="centerbox captionval">110kV天才线119短路间隔</div>
      </div>-->
      <div class="table-container">
        <el-table
          :data="pointData"
          style="width: 100%"
          height="100%"
          :row-class-name="tableRowClassName"
          border
        >
          <el-table-column prop="name" :label="BAYNAME" :show-overflow-tooltip="true"></el-table-column>
          <el-table-column prop="myJcz" label="监测值" :show-overflow-tooltip="true" width="160">
            <template slot-scope="scope">
              <div
                :class="[scope.row.status=='0' ?'orange0':'',scope.row.status=='1' ?'orange1':'', scope.row.status=='2' ?'orange2':'',scope.row.status=='3' ?'orange3':'',scope.row.status=='4' ?'orange4':'',scope.row.status=='5' ?'orange5':'' ]"
              >{{ scope.row.myJcz}}</div>
            </template>
          </el-table-column>
          <el-table-column prop="time" label="检测时间" :show-overflow-tooltip="true" width="200"></el-table-column>
        </el-table>
      </div>
    </div>
  </div>
</template>

<script lang="ts">
import { Component, Prop, Vue } from "vue-property-decorator";

@Component
export default class extends Vue {
  @Prop()
  pointData;
  @Prop()
  BAYNAME;
  table = [];
  // 表格隔行变色
  tableRowClassName({ row, rowIndex }: any): string {
    // console.log(row, rowIndex);
    if (rowIndex % 2 === 0) {
      return "row1";
    } else {
      return "row2";
    }
  }
}
</script>

<style lang="scss" scoped>
.jgldmk {
  width: 100%;
  height: 100%;
  .content {
    width: 100%;
    height: calc(100% - 0.3rem);
    padding: 0.1rem 0.2rem;
    // .caption {
    //   width: 100%;
    //   height: 0.4rem;
    //   background: rgba(15, 93, 200, 0.8);
    //   .captionname {
    //     width: calc(100% - 320px);
    //   }
    //   .captionval {
    //     width: 320px;
    //   }
    // }
    .table-container {
      width: 100%;
      height: 100%;
      // height: calc(100% - 0.4rem);
    }
  }
}
</style>

